<template>

    <div class="store-add-product">
        <button @click="doAddProduct" v-loading="loading">Add product</button>

        <!-- 选择商品弹窗 -->
        <OrderProductSelect ref="product_select" type="store" v-model="dialog" @selectDesign="insertDesign($event)" />

    </div>

</template>

<script>
export default {
    props: {
        store: { type: Object, default: () => ({}) },
    },

    data () {
        return {
            loading: false,
            dialog: null,
            cache: '',
        };
    },

    methods: {

        // Add product添加商品
        doAddProduct () {
            if (this.loading) {
                // 加载中
            } else if (this.cache) {

                if (this.cache == 'template') {
                    this.dialog = {}; //打开选择模板弹窗
                } else {
                    this.$emit('global:productDialogOpen')
                }
            } else {
                this.loading = true;
                this.$http("storeTemplate.getList", { page_num: 1, page_size: 1 }).then(res => {
                    const list = res.data || []
                    if (list.length > 0) {
                        this.dialog = {}; //打开选择模板弹窗
                        this.cache = 'template'
                    } else {
                        this.cache = 'product'
                        this.$emit('global:productDialogOpen')
                    }
                    this.loading = false;
                })
            }
        },


        // 插入设计器
        insertDesign (products) {
            const product = products[0] || {}
            const store_id = this.store.id;
            const design_id = (product || {}).design_id;
            if (store_id && design_id) {
                this.$router.push({
                    path: "/synchronize",
                    query: { tempid: design_id, shopid: store_id },
                });
            }
        },

    },
    mounted () { },
};
</script>

<style lang="scss" scoped>
.store-add-product {
    button {
        width: 100%;
        height: 100%;
        background-color: #fff;
        position: relative;
        overflow: hidden;

        &::v-deep .el-loading-spinner {
            height: 42px;
            display: flex;
            align-items: center;
            justify-content: center;
            .circular {
                width: 24px;
                height: 24px;
            }
        }
    }
}
</style>
